<template>
  <div>
    <div class="time">{{ timeStr }}</div>
    <div class="date">{{ dateStr }}</div>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  props: {
    showSeconds: {
      type: Boolean,
      default: true
    },
    show24hour: {
      type: Boolean,
      default: true
    },
    showampm: {
      type: Boolean,
      default: true
    },
    showDate: {
      type: Boolean,
      default: true
    },
    showWeekends: {
      type: Boolean,
      default: true
    },
    showYear: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      time: Date.now()
    }
  },
  computed: {
    timeStr () {
      var timeFormat = this.show24hour ? 'HH:mm' : 'h:mm';
      timeFormat += this.showSeconds ? ':ss' : '';
      var timeStr = moment(this.time).locale('zh-cn').format(timeFormat);
      timeStr += !this.show24hour && this.showampm ? moment(this.time).locale('en').format(' a') : '';
      return timeStr;
    },
    dateStr() {
      if (this.showDate) {
        var dateFormat = this.showWeekends ? 'dddd,' : '';
        dateFormat += 'MMMM D';
        dateFormat += this.showYear ? ', YYYY' : '';
        return moment(this.time).locale('zh-cn').format(dateFormat);
      }
      return '';
    }
  },
  created () {
    setInterval(() => {
      this.time = Date.now();
    }, 1000);
  }
}
</script>
